<template>
    <div>
        <!--弹出层  添加编辑-->
        <el-dialog :visible.sync="visible" :modal="false" title="添加创作任务" width="60%" :before-close="handleClose">

            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="标题:" prop="title">
                            <el-input v-model="form.title" placeholder="请输入创作任务名称" size="small" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="素材:" prop="material_url">

                            <div class="uploadcol">
                                <div class="uploadborder">
                                    <img src="@/assets/img/uploadimg.jpg" />
                                </div>

                                <div class="block" v-for="(item, index) in cover_url" :key="index">
                                    <div style="position: relative;">
                                        <img :src="item.cover_url" alt="示例图片"
                                            style="width: 100px;height: 100px;margin-left: 15px;border:1px solid;position: relative;" />
                                        <i class="el-icon-error image-cross" @click="handleDelImage(item.id,item.content_id)"></i>
                                    </div>
                                </div>

                            </div>
                            <div>
                                <el-button type="primary" @click="showAddCourseWareVisible = true">请选择课件素材</el-button>
                                <p style="font-weight: bold;font-size: 16px;">（非必填，老师可选择与任务有关的知识点或本地图片素材供学生使用）</p>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="描述:" prop="descr">
                            <el-input v-model="form.descr" placeholder="请输入创作任务描述" size="small" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelForm" size="small">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')" size="small">保存</el-button>
            </div>
        </el-dialog>

        <!-- 阅读、听力、录音等选择 -->
        <div v-if="showAddCourseWareVisible">
            <show-add-course-ware :visible.sync="showAddCourseWareVisible" :task_type="task_type"
                :edit_task_courseware_arr="edit_task_courseware_arr"
                                  :current_day="current_day"
                @handleSelectFiles="handleSelectFiles"></show-add-course-ware>
        </div>

    </div>
</template>

<script>
import ShowAddCourseWare from "@/views/kanke/textbook/courseware/components/ShowAddCourseWare";
export default {
    name: "ShowCreate",
    components: {
        ShowAddCourseWare
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        current_day: {
            type: String,
            default: "taskFirstDay"
        },
        task_type: {
            // type:Number,
            default: 4
        },
        edit_create_data: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {
            uploadDialogVisible: false,
            showAddCourseWareVisible: false,
            edit_task_courseware_arr: [],
            image: 'image',
            form: {
                id:0,
                content_id:0,
                title: "",
                descr: "",
                current_day: this.current_day,
                task_type: "create",
                cover_url: [
                ]
                //最多限制五个课件
            },
            cover_url:[],
            rules: {
                title: [
                    { required: true, message: "标题不能为空", trigger: "blur" }
                ]
            }
        }
    },
    computed:{
      tmpTaskData(){
        return this.$store.state.assignTask.tmpTaskData;
      }
    },
    watch: {
      // 监听整个数组的变化
      cover_url: {
        deep: true,
        handler(newVal, oldVal) {
          console.log('Array changed!', newVal);
          this.form.cover_url = newVal;
        }
      }
    },
    created() {
        this.init(true);
    },
    mounted() {
        console.log('edit_create_data', this.edit_create_data);
        if (this.edit_create_data) {
            this.form = this.edit_create_data;
            if (this.edit_create_data?.cover_url?.length > 0) {
                this.edit_task_courseware_arr = [...this.edit_create_data.cover_url]

               console.log('edit create task courseware arr',this.edit_task_courseware_arr);
            }
        }
    },
    methods: {
        init() {
        },
        handleDelImage(id,content_id) {
            console.log('handle image id', id);
            this.$confirm('确定要删除该课件?', '提示', {
                cancelButtonText: '取消',
                confirmButtonText: '确定',
                type: 'warning'
            }).then(() => {
                let data = this.cover_url;
                console.log('当前课件数组',this.cover_url)
                if (data.length > 0) {
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].id == id && data[i].content_id == content_id) {
                            console.log('当前删除的课件id-content_id',id,content_id);
                            this.cover_url.splice(i, 1);
                            break;
                        }
                    }
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        handleClose(done) {
            this.$emit('update:visible', false);
            this.$refs['form'].resetFields();
        },
        handleSelectFiles(val) {
            console.log('---当前选中的文件---创作', val);
            console.log('---当前任务类型', this.task_type);
            if(this.cover_url.length > 0){
                if(this.tmpTaskData.length >0){
                    console.log('已选中课件',this.cover_url)
                    console.log('当前再选中课件',this.tmpTaskData)

                    this.cover_url = this.cover_url.concat([...this.tmpTaskData]);

                }
            }else{
              this.cover_url = [...this.tmpTaskData];
            }
            //this.form.cover_url = [...val];
            this.msgSuccess('保存成功');
        },
        cancelForm() {
            this.$emit('update:visible', false);
            this.$refs['form'].resetFields();
        },
        submitForm(form) {
            console.log(this.form);
            this.$refs[form].validate((valid) => {
                if (valid) {
                    //保存创作任务
                    if(this.form.id > 0){
                    }else{
                        let uniqueKey = new Date().getTime();
                        this.form.id = uniqueKey;
                        this.form.content_id = uniqueKey;
                    }
                    if(this.cover_url.length >5){
                        this.$message.error('最多只能添加5个课件');
                        return false;
                    };
                    this.form.cover_url = this.cover_url;
                    const param = Object.assign({}, this.form);
                    param.task_type = 'create';
                    param.current_day = this.current_day;
                    console.log('---create form---',this.form);

                    //添加排序值 start
                    this.$store.commit("GET_TASK_MAX_SORT",{'current_day':this.current_day})
                    let max_sort = this.$store.state.assignTask.max_sort;
                    //添加排序值 end
                    param.sort = max_sort + 1;


                    this.$store.commit('EDIT_TASK_DAY', param);

                    this.$emit('update:visible', false);
                    this.$refs['form'].resetFields();

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        getTaskType(task_type) {
            //1听力 2阅读 3.录音 4.创作
            switch (task_type) {
                case 1:
                    return 'listen';
                    break;
                case 2:
                    return 'read';
                    break;
                case 3:
                    return 'record';
                    break;
                case 4:
                    return 'create';
                    break;
                default:
                    break;
            }
        }
    }

}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
    background: white;
}

.uploadcol {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .uploadborder {
        img {
            width: 80px;
            height: 80px;
            margin-right: 40px;
        }

    }
}

.image-cross {
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 0;
    color: blue;
    /* 蓝色 */
    //color: #5CB6FF; /* 淡蓝色 */
    font-size: 27px;
    /* 字号 */
}
</style>